<template>
  <div id="contsainer"></div>
</template>
<script>
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addGeoJsonDataSource(this.viewer)
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('contsainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addGeoJsonDataSource(viewer) {
      //加载中国数据
      let promise1 = Cesium.GeoJsonDataSource.load("http://localhost:8888/model/SampleData/china.json",{
        fill:Cesium.Color.RED,
        markerSize:10,//给点使用的
        markerColor:Cesium.Color.RED,//给点使用的
        stroke:Cesium.Color.PINK,//折线和多边形轮廓的颜色
        strokeWidth:20,//折线和多边形轮廓的宽度
        clampToGround:false//geojson的outline不能贴地,如果设置true，边框线将被禁用
      });

      promise1.then(function (dataSource) {
        viewer.dataSources.add(dataSource)
      })

      let promise2 = Cesium.GeoJsonDataSource.load("http://localhost:8888/model/SampleData/usa.topojson");
      promise2
        .then(function (dataSource) {
          viewer.dataSources.add(dataSource);

          let entities = dataSource.entities.values;

          let colorHash = {};
          for (let i = 0; i < entities.length; i++) {
            //遍历所有的entity,随机给颜色
            let entity = entities[i];
            let name = entity.name;
            let color = colorHash[name];
            if (!color) {
              color = Cesium.Color.fromRandom({
                alpha: 1.0
              });
              colorHash[name] = color;
            }

            //Set the polygon material to our random color.
            entity.polygon.material = color;
            //Remove the outlines.
            entity.polygon.outline = false;

            //根据人口给拉伸高度
            entity.polygon.extrudedHeight = entity.properties.Population / 50.0;
          }
        })
    }
  }
}
</script>
<style scoped>
#contsainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
